<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>书架管理</span>
      <el-button size="mini" type="primary" class="el-icon-plus" @click="addClassifyBtnFn" style="float: right">
        添加
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight">
        <el-table-column prop="id" type="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="bookshelf" label="名称" width="300"></el-table-column>
        <el-table-column prop="notes" label="备注"></el-table-column>
        <el-table-column label="操作" align="" width="">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"
              @click="updateClassifyBtnFn(scope.row)">编辑</el-button>
            <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red"
              title="这是一段内容确定删除吗？" @confirm="delShelfBtnFn(scope.row.id)">
              <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出层 对话框 -->
    <el-dialog :title="isEdit ? '更新书架' : '添加书架'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
      @closed="addCloseFn">
      <el-form ref="shelfFormRef" :model="shelfForm" label-width="80px" :rules="rules">
        <el-form-item label="名称" prop="bookshelf" label-width="50px">
          <el-input v-model="shelfForm.bookshelf"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="notes" label-width="50px">
          <el-input v-model="shelfForm.notes"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <Pagination :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import { addShelfAPI, delShelfAPI, getShelfListAPI, uptShelfAPI } from "@/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      dialogVisible: false,
      isEdit: false, //ture 编辑 false 新增
      editId: "", //编辑id
      tableData: [],
      shelfForm: {
        bookshelf: "",
        notes: "",
      },
      rules: {
        bookshelf: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        notes: [
          { required: true, message: "请输入备注", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 分页
    handlePageChange(obj) {
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getList();
    },
    // 获取分类
    async getList() {
      const res = await getShelfListAPI(this.pagenum, this.pagesize);
      this.tableData = res.data.data;
      this.total = res.data.total;
      // this.$axios({
      //   methods: "GET",
      //   url: "http://localhost:3000/shelf",
      // }).then((res) => {
      //   // console.log(res);
      //   if (res.status == 200) {
      //     this.tableData = res.data;
      //   }
      // });
    },
    // 添加 分类框
    addClassifyBtnFn() {
      this.isEdit = false;
      this.dialogVisible = true;
    },
    // 更新 分类框
    updateClassifyBtnFn(obj) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.editId = obj.id;
      this.$nextTick(() => {
        // this.shelfForm = obj;
        this.shelfForm.bookshelf = obj.bookshelf;
        this.shelfForm.notes = obj.notes;
      });

      console.log(obj);
    },
    // 提交 添加/更新 分类
    onSubmit() {
      this.$refs.shelfFormRef.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            const res = await uptShelfAPI({
              ...this.shelfForm,
              id: this.editId,
            });
            if (res.data.status === 0) {
              this.$message.success("更新书架成功！");
            } else {
              this.$message.error("更新书架失败！");
            }
          } else {
            const res = await addShelfAPI(this.shelfForm);
            if (res.data.status === 0) {
              this.$message.success("添加书架成功！");
            } else {
              this.$message.error("添加书架失败！");
            }
          }
        } else {
          return false;
        }
        this.dialogVisible = false;
        this.getList();
      });
    },
    // 删除书架
    async delShelfBtnFn(id) {
      const res = await delShelfAPI(id);
      if (res.data.status === 0) {
        this.$message.success("删除书架成功！");
      } else {
        this.$message.error("删除书架失败！");
      }
      this.getList();
    },
    // 对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    addCloseFn() {
      console.log(123);
      this.$refs.shelfFormRef.resetFields();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style></style>
